<?php if(isset($system_file_list_value['button_data']) && is_array($system_file_list_value['button_data'])) {
    foreach ($system_file_list_value['button_data'] as $key=>$button_data_value){
        if($button_data_value['bottom']){ continue; }
        ?>
        <button class="btn purple" type="button" data-toggle="modal" data-target="#<?php echo $system_file_list_value['class'];?>" onclick="system_auto_load('<?php echo $system_file_list_value['class'];?>','<?php echo $button_data_value['params'];?>');">
            <i class="fa <?php echo $button_data_value['icon'];?>"> <?php echo $button_data_value['name'];?></i>
        </button>
    <?php }?>
<?php }?>

<style>
    .VivaTimeline dl {
        position: relative;
        top: 0;
        padding: 20px 0;
        margin: 0
    }

    .VivaTimeline dl:before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 18%;
        z-index: 100;
        width: 2px;
        margin-left: -1px;
        content: '';
        background-color: #ccd1d9
    }

    .VivaTimeline dl dt {
        position: relative;
        top: 30px;
        z-index: 200;
        width: 120px;
        padding: 3px 5px;
        margin: 0 auto 30px;
        font-weight: 400;
        color: #fff;
        text-align: center;
        background-color: #aab2bd;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px
    }

    .VivaTimeline dl dd {
        position: relative;
        z-index: 200
    }

    .VivaTimeline dl dd .circ {
        position: absolute;
        top: 40px;
        left: 18%;
        z-index: 200;
        width: 22px;
        height: 22px;
        margin-left: -11px;
        background-color: #4fc1e9;
        border: 4px solid #f5f7fa;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%
    }

    .VivaTimeline dl dd .time {
        position: absolute;
        top: 31px;
        left: 18%;
        display: inline-block;
        width: 200px;
        padding: 10px 20px;
        color: #4fc1e9
    }

    .VivaTimeline dl dd .events {
        position: relative;
        width: 47%;
        padding: 10px 0 0;
        margin-top: 31px;
        background-color: #CCC;
        border-radius: 4px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px
    }

    .VivaTimeline dl dd .events:before {
        position: absolute;
        top: 12px;
        width: 0;
        height: 0;
        content: '';
        border-style: solid;
        border-width: 6px
    }

    .VivaTimeline dl dd .events .events-object {
        margin: 0 auto;
    }

    .VivaTimeline dl dd .events .events-header {
        min-height: 30px;
        line-height: 20px;
        text-align: center;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
    }

    .VivaTimeline dl dd .events .events-body {
        overflow: hidden;
        zoom: 1;
        background-color: #EEE;
        padding: 10px;
    }
    .VivaTimeline dl dd .events .events-body .row{
        display:none;
    }

    .VivaTimeline dl dd .events .events-body .events-desc {
        text-indent: 2em;
        padding: 0 15px;
    }

    .VivaTimeline dl dd .events .events-footer {
        text-align:center;
    }
    .VivaTimeline dl dd .events .events-footer ol {
        list-style: none;
        margin: 0 auto;
        padding: 0;
    }
    .VivaTimeline dl dd .events .events-footer ol li {
        background: #32b487;
        border-radius: 5px;
        margin: 10px;
        display: inline-block;
        width: 10px;
        height: 10px;
        cursor: pointer;
    }
    .VivaTimeline dl dd .events .events-footer ol .active{
        transform: scale(2);
    }

    .VivaTimeline dl dd.pos-right .time {
        margin-left: -200px;
        text-align: right
    }

    .VivaTimeline dl dd.pos-right .events {
        left: 21%;
    }

    .VivaTimeline dl dd.pos-right .events:before {
        left: -12px;
        border-color: transparent #CCC transparent transparent
    }

    .VivaTimeline dl dd.pos-left .time {
        margin-left: 0;
        text-align: left
    }

    .VivaTimeline dl dd.pos-left .events {
        float: left
    }

    .VivaTimeline dl dd.pos-left .events:before {
        right: -12px;
        border-color: transparent transparent transparent #CCC
    }

    .VivaTimeline .carousel-indicators{
        bottom: 0;
    }

    @media screen and (max-width: 767px) {
        .VivaTimeline dl:before {
            left: 90px
        }
        .VivaTimeline dl dt {
            margin: 0 30px 30px
        }
        .VivaTimeline dl dd .circ {
            left: 90px
        }
        .VivaTimeline dl dd .time {
            left: 20px
        }
        .VivaTimeline dl dd.pos-left .time {
            padding: 10px 0;
            margin-left: 0;
            text-align: left
        }
        .VivaTimeline dl dd.pos-left .events {
            float: right;
            width: 73%;
            margin-right: 4%;
        }
        .VivaTimeline dl dd.pos-left .events:before {
            left: -12px;
            border-color: transparent #CCC transparent transparent
        }
        .VivaTimeline dl dd.pos-right .time {
            padding: 10px 0;
            margin-left: 0;
            text-align: left
        }
        .VivaTimeline dl dd.pos-right .events {
            float: right;
            width: 73%;
            margin-right: 4%;
        }
    }

    @media screen and (max-width: 500px) {
        .VivaTimeline dl dd.pos-left .events {
            float: right;
            width: 63%;
            margin-right: 4%;
        }
        .VivaTimeline dl dd.pos-right .events {
            float: right;
            width: 63%;
            margin-right: 4%;
        }
    }

</style>
<script type="text/javascript">
    //初始参数
    function init_<?php echo $system_file_list_value['class'];?>(str_class,obj_params)
    {
        if(obj_params)
        {
            //解析数据
            var b = new Base64();
            temp_paramas = b.decode(obj_params);
            temp_paramas = eval("("+temp_paramas+")");
            var str_html = '';
            if(temp_paramas['logistics_list'].length > 0)
            {
                $.each(temp_paramas['logistics_list'], function(i,val)
                {
                    str_html += '<dd class="pos-right clearfix">';
                    str_html += '<div class="circ"></div>';
                    str_html += '<div class="time">';
                    str_html += val['cms_create_time'];
                    str_html += '</div>';
                    str_html += '<div class="events">';
                    str_html += '<div class="events-header">';
                    str_html += val['cms_desc'];
                    str_html += '</div></div></div>';
                });
            }
            $('#logistics_html').html(str_html);
        }
    }
</script>
<div hidden id="logistics_html_cms_id"> </div>
<div class="modal fade" id="<?php echo $system_file_list_value['class'];?>" tabindex="-1"  role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" >
        <div class="modal-content animated bounceInTop">
            <div class="modal-header">
                <button type="button" class="close second" data-dismiss="modal" aria-hidden="true">×</button>
                <h2 class="modal-title">物流详情</h2>
            </div>
            <div class="modal-body">
                <div class="timeline-container">
                    <div class="VivaTimeline">
                        <dl id="logistics_html"></dl>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
            <div class="modal-footer">
                <div class="form-body">
                    <span>
                        <button class="btn purple" type="button" id="<?php echo $system_file_list_value['class'];?>-cancel" data-dismiss="modal">
                        	   <i class="fa fa-book"> 知道了 </i>
                        </button>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>